<template>
	<n-popover
		ref="popoverRef"
		trigger="hover"
		placement="bottom-end"
		style="padding: 0; border-radius: 10px"
		:show-arrow="false">
		<template #trigger>
			<div class="h-full flex items-center">
				<account-avatar :data="userInfo?.avatar" :width="36" :toProfile="false" />
			</div>
		</template>
		<div v-if="userInfo" class="w-[249px] flex flex-col">
			<div class="px-[16px] py-[20px] pb-3 border-b border-border-2">
				<div class="cursor-pointer" @click="closePopup">
					<AccountInfo :userInfo="userInfo" :vipBonusStatus="vipBonusStatus" />
					<div class="my-2">
						<span class="text-[#96A5AA]">{{ vipBonusStatus.nextExp }} XP</span>
						{{ $t('vip.toLevelUp') }}
					</div>

					<n-progress
						type="line"
						color="var(--color-success)"
						:show-indicator="false"
						:percentage="Number(vipBonusStatus.expPercentage)"
						:height="16"
						indicator-text-color="var(--color-success)" />

					<div class="flex items-center justify-between my-2">
						<div style="color: #00be7a">{{ vipBonusStatus.expPercentage }}%</div>
						<div class="flex items-center">
							<img :src="vipBonusStatus.nextVipIcon" alt="" class="w-[20px]" />
							{{ vipBonusStatus.nextVipName }}
						</div>
					</div>
				</div>
				<!-- <div class="mt-[6px]">{{ userInfo?.nickName || userInfo?.userName }}</div>
				<div>@{{ userInfo?.userName }}</div>
				<div class="flex items-center">
					<account-titles :vip="userInfo?.vip" :star="userInfo?.star" :medal="userInfo?.medal" />
					<account-tags class="ml-1" :data="memberStore.userTags(userInfo.userId)"></account-tags>
				</div>
				<account-follow :data="userInfo" class="text-t-3" /> -->
				<!-- <div class="w-full" v-if="!isPC()">
					<base-image :src="bannerSrc" class="w-full h-full mt-2 sm:mt-0" />
				</div> -->
			</div>

			<div class="px-[20px] py-[6px]">
				<div
					class="rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="walletStore.setWalletDepositShow(true)">
					<base-icon class="text-[20px]" name="download"></base-icon>
					<div class="ml-3">{{ $t('wallet.deposit') }}</div>
				</div>
				<div
					class="mt-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="walletStore.setWalletWithdrawShow(true)">
					<base-icon class="text-[20px]" name="withdraw"></base-icon>
					<div class="ml-3">{{ $t('wallet.withdraw') }}</div>
				</div>
				<div
					class="mt-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="toPath('/rewards-vip')">
					<base-icon class="text-[20px]" name="discover2"></base-icon>
					<div class="ml-3">{{ $t('activity.vip-rewards') }}</div>
				</div>
				<!-- <div
					class="mt-5 flex items-center cursor-pointer"
					@click="profileStore.setReportShow(true)">
					<base-icon class="text-[20px]" name="result"></base-icon>
					<div class="ml-3">{{ $t('report.title') }}</div>
				</div> -->
				<div
					class="mt-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="toPath('/my-bets')">
					<base-icon class="text-[20px]" name="ticket"></base-icon>
					<div class="ml-3">{{ $t('myBets.title') }}</div>
				</div>
				<div
					class="mt-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="toPath({ name: 'transactions' })">
					<base-icon class="text-[20px]" name="result2"></base-icon>
					<div class="ml-3">{{ $t('profile.transactions') }}</div>
				</div>
				<div
					class="mt-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="toPath({ name: 'settings' })">
					<base-icon class="text-[20px]" name="settings"></base-icon>
					<div class="ml-3">{{ $t('app.setting') }}</div>
				</div>
				<!-- <div class="mt-5 flex items-center cursor-pointer" @click="appStore.showAbout(true)">
					<base-icon class="text-[20px]" name="about1"></base-icon>
					<div class="ml-3">{{ $t('app.about') }}</div>
				</div> -->
				<div
					class="my-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="toPath({ name: 'agentOverview' })">
					<base-icon class="text-[20px]" name="affiliate"></base-icon>
					<div class="ml-3">{{ $t('agent.title') }}</div>
				</div>
				<div
					class="my-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="handleWaiter">
					<base-icon class="text-[20px]" name="waiter"></base-icon>
					<div class="ml-3">{{ $t('app.waiter') }}</div>
				</div>
				<div class="border-b border-border-2"></div>
				<div
					class="mt-[3px] rounded-lg px-[12px] py-[10px] flex items-center cursor-pointer app-bg-react"
					@click="logout">
					<base-icon class="text-[20px]" name="quit"></base-icon>
					<div class="ml-3">{{ $t('account.logout') }}</div>
				</div>
			</div>
			<!-- <app-social></app-social>
			<div class="my-6 flex justify-center gap-3">
				<app-lisence class="h-9" :type="LisenceType.Anjouan"></app-lisence>
				<app-lisence class="h-9" :type="LisenceType.PAGCOR"></app-lisence>
			</div> -->
		</div>
	</n-popover>
</template>
<script lang="ts" setup>
import { NPopover, NProgress, PopoverInst } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useProfileStore, useWalletStore, useAccountStore } from '@/store'
import { UserInfo } from '@/types'
import { computed, ref, watch } from 'vue'
import { BaseIcon } from '@/components/base'
import { AccountAvatar, AccountInfo } from '@/components/account/'
// import AppNotice from '../app-notice/index.vue'
// import AppSocial from '../app-social/index.vue'
// import AppLisence from '../app-lisence/index.vue'
// import { goHelp } from '@/utils'
// import { LisenceType } from '@/enums'
import { customerService } from '@/utils'
import { useRequest } from '@/hooks'
import { t } from '@/utils'
import { getVipBonusStatus } from '@/api/activity'

// const appStore = useAppStore()
// const activityStore = useActivityStore()
// const progress = computed(() => activityStore.vipPanel().progress)
// const bannerSrc = computed(() =>
// 	appStore.lang === 'en' ? 'activity/banner-en.png' : 'activity/user-right-banner.png'
// )

defineOptions({ name: 'AppAccountInfo' })

const popoverRef = ref<PopoverInst | null>(null)

const router = useRouter()

const profileStore = useProfileStore()
const walletStore = useWalletStore()
const accountStore = useAccountStore()

const userInfo = computed<UserInfo | null>(() => profileStore.userInfo)

const handleWaiter = () => {
	customerService()
	popoverRef.value?.setShow(false)
}

const toPath = (path: string | object) => {
	router.push(path)
	popoverRef.value?.setShow(false)
}
const { run: logout } = useRequest(accountStore.logout, {
	showSuccess: t('logout.success'),
	showError: true
})
const closePopup = () => {
	profileStore.showProfile({ show: true })
	popoverRef.value?.setShow(false)
}
watch(userInfo, (val) => {
	if (val?.userId) {
		// memberStore.getUserTags([val?.userId])
	}
})
const vipBonusStatus = ref<any>({})
getVipBonusStatus().then((res) => {
	vipBonusStatus.value = res.data
})
</script>
